@import '@ng-nest/ui/style/params/primary';
@import 'core/prefix';

// 明亮模式
.x-light {
  $--x-border-base: 1px solid rgba(0, 0, 0, 0.07);
  $background-color: white;
  $tabs-background-color: #f5f5f5;
  $crumb-background-color: #fdfdfd;

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
  }

  ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .x-table {
    border: $--x-border-base;
    background-color: $background-color;
    > thead > tr > th {
      background-color: $background-color;
      border-bottom: $--x-border-base;
    }
    > tbody tr > td {
      background-color: $background-color;
      border-bottom: $--x-border-base;
    }
  }

  .x-card {
    border: none;
    background-color: $background-color;
    .x-card-header {
      border-bottom: $--x-border-base;
    }
  }

  app-index {
    > app-tabs {
      background-color: $tabs-background-color;
      .x-slider-scroll > ul > li.x-slider-highlight {
        background-color: $crumb-background-color;
      }
      .tab {
        border-right: 1px solid rgba(0, 0, 0, 0.04);
      }
    }

    > app-crumb {
      background-color: $crumb-background-color;
      border-bottom: $--x-border-base;
    }

    > app-sider {
      border-right: $--x-border-base;
      > .silder-image {
        &:after {
          background-color: $background-color;
        }
      }
    }

    .#{$prefix} {
      &-panel {
        background-color: $background-color;
        > h4 {
          border-bottom: $--x-border-base;
        }
      }
      &-table-form {
        border-top: $--x-border-base;
      }
      &-table-single {
        border-right: $--x-border-base;
        x-table {
          .x-pagination {
            border-top: $--x-border-base;
          }
        }
      }
      &-tree-left {
        border-right: $--x-border-base;
        x-tree {
          background-color: $background-color;
        }
      }
      &-table-left {
        x-table {
          background-color: $background-color;
        }
      }
      &-form-right {
        x-form {
          background-color: $background-color;
        }
      }
      &-tabs {
        .x-tabs-block.x-tabs-top > .x-tabs-list {
          border-bottom: $--x-border-base;
        }
      }
    }
  }
  app-float-node {
    > ul {
      background-color: $background-color;
    }
  }
}

// 暗黑模式
.x-dark {
  $--x-border-base: 1px solid rgba(0, 0, 0, 0.4);
  $background-color: #1e1e1f;
  $tabs-background-color: #f5f5f5;
  $crumb-background-color: #2f2f2f;

  .x-table {
    border: none;
    background-color: $background-color;
    > thead > tr > th {
      background-color: $background-color;
      border-bottom: $--x-border-base;
    }
    > tbody tr > td {
      background-color: $background-color;
      border-bottom: $--x-border-base;
    }
  }

  .x-card {
    border: none;
    background-color: $background-color;
    .x-card-header {
      border-bottom: $--x-border-base;
    }
  }

  app-index {
    background-color: $background-color;
    > app-tabs {
      background-color: $background-color;
      .x-slider-scroll > ul > li.x-slider-highlight {
        background-color: $crumb-background-color;
      }
      .tab {
        border-right: $--x-border-base;
      }
    }

    > app-crumb {
      background-color: $crumb-background-color;
      border-bottom: $--x-border-base;
    }

    > app-sider {
      border-right: $--x-border-base;
      > .silder-image {
        &:after {
          background-color: #1d1d1d;
        }
      }
    }

    .#{$prefix} {
      &-panel {
        background-color: $background-color;
        > h4 {
          border-bottom: $--x-border-base;
        }
      }
      &-table-form {
        border-top: $--x-border-base;
      }
      &-tree-left {
        border-right: $--x-border-base;
        x-tree {
          background-color: $background-color;
        }
      }
      &-form-right {
        x-form {
          background-color: $background-color;
        }
      }
      &-table-single {
        border-right: $--x-border-base;
        x-table {
          .x-pagination {
            border-top: $--x-border-base;
          }
        }
      }
      &-tabs {
        .x-tabs-block.x-tabs-top > .x-tabs-list {
          border-bottom: $--x-border-base;
        }
      }
    }
  }
  app-float-node {
    > ul {
      background-color: $background-color;
    }
  }
}
